<template>
<div class="ticket-list" v-bind:style="{height:height}">
	<form class="ticket-list-form">
		<ul>
			<li style="color:#FFFFFF; font-size:26px;">查询 &nbsp&nbsp&nbsp |</li>
			<li><input type="text" placeholder="出发地/所在地" v-model="data.start"></li>
			<li><input type="text" placeholder="到达地/目的地" v-model="data.end"></li>
			<li><input type="date" placeholder="出发日期/出发时间" v-model="data.startTime"></li>
			<li><input type="button" value="查询" v-if="ok" @click="selectTicket()"></li>
		</ul>
	</form>
	<table class="ticket-list-table">
		<tr>
			<th>序号</th>
			<th>出发地</th>
			<th>到达地</th>
			<th>出发时间</th>
			<th>车票类型</th>
			<th>车票数</th>
			<th>价格</th>
			<th>操作</th>
		</tr>
		<tr v-for="d in datas">
			<td>{{d.id}}</td>
			<td>{{d.start}}</td>
			<td>{{d.end}}</td>
			<td>{{d.startTime}}</td>
			<td>{{d.ticketType}}</td>
			<td>{{d.ticketSum}}</td>
			<td>{{d.ticketPrice}}</td>
			<td V-if="d.ticketSum!=0">
				<input type="button" value="预订" @click="addAdticket(d)" style="width:110px; height:40px;">
			</td>
			<td v-else>缺票</td>
		</tr>
	</table>
	<div class="ticket-bottom">
		1.如果查询结果中没有满足需求的车次，您还可以使用接续换乘 功能，查询途中换乘一次的部分列车余票情况。<br>
		2.显示的卧铺票价均为上铺票价，供您参考。具体票价以您确认支付时实际购买的铺别票价为准。
	</div>
</div>
</template>
 
<script>
module.exports = {
    data: function() {
        return {
        	datas : '',
        	adminUserName : '',
        	data : {
	        	start : '',
	        	end : '',
	        	startTime : ''
        	},
        	ok : true,
	        height : '800px'
        }
    },
    mounted : function(){
    	if(this.$route.query.ok==false){
    		this.data.start = this.$route.query.start;
    		this.data.end = this.$route.query.end;
    		this.data.startTime = this.$route.query.startTime;
    		this.ok = this.$route.query.ok;
    		this.selectTicketB();
    	}
    	this.seeklogin();
    },
    methods : {
    	selectTicket : function(){
    		
    		this.height = 'auto';
    		
    		var target = this;
    		axios.post('/bac/ticket/selectTicket',this.data)
    		.then(function(response){
    			//经验证response返回的数据存储在data里
    			//经过后台返回的数据存储在result列表的data中;
    			target.datas = response.data.result.data;
    		})
    		.catch(function(error){
    			console.log(error);
    		});
    	},
		selectTicketB : function(){
    		
    		var target = this;
    		axios.post('/bac/ticket/selectTicketB',this.data)
    		.then(function(response){
    			//经验证response返回的数据存储在data里
    			//经过后台返回的数据存储在result列表的data中;
    			target.datas = response.data.result.data;
    		})
    		.catch(function(error){
    			console.log(error);
    		});
    	},
    	seeklogin : function(){
    		var target = this;
    		axios.get('/common/seeklogin')
			.then(function (response){
				var success = response.data.success;
				if(success!=false){
					target.adminUserName = response.data.result.data;
				}
			})
			.catch(function (error) {
				console.log(error);
			});
    	},
    	ticketsum : function(dd){
    		dd.ticketSum = dd.ticketSum-1;
    		axios.post('/bac/ticket/updateTicketSum',dd)
    		.then(function(response){
    			//经验证response返回的数据存储在data里
    			//经过后台返回的数据存储在result列表的data中;
    			var success = response.data.success;
    			if(success==true){
    				alert("订购成功,祝你旅行愉快！")
    			}
    		})
    		.catch(function(error){
    			console.log(error);
    		});
    	},
    	//购买车票
    	addAdticket : function(d){
    		var target = this;
    		if(this.adminUserName==''){
    			alert("你还未登录");
    			window.location.href = "./Login.html";
    		}else{
    			axios.post('/bac/adticket/insertAdticket',{
    				adminUserName : target.adminUserName,
    				start : d.start,
    				end : d.end,
    				ticketType : d.ticketType,
    				startTime : d.startTime
    			})
        		.then(function(response){
        			//经验证response返回的数据存储在data里
        			//经过后台返回的数据存储在result列表的data中;
        			var success = response.data.success;
        			if(success==true){
        				target.$options.methods.ticketsum(d);
        			}else{
        				alert("预订失败");
        			}
        		})
        		.catch(function(error){
        			console.log(error);
        		});
    		}
    	}
    }
}
</script>
 
<style>
	body,ul,li,a{
		padding:0px;
		margin:0px;
		text-decoration:none;
		list-style:none;
	}
	.ticket-list{
		width:auto;
		height:800px;
		margin:0px 120px;
		margin-bottom:20px;
		padding-top:10px;
		padding-bottom:10px;
	}
	.ticket-list-table{
		background-color:#F5DEB3;
		margin:10px 220px;
		text-align:center;
		border: double 1px #EAEAEA;
	}
	.ticket-list-table tr th{
		border: double 1px #EAEAEA;	
		width:150px;
		height:80px;
		background-color:#1E90FF;
	}
	.ticket-list tr td{
		border: double 1px #EAEAEA;
		width:150px;
		height:50px;
	}
	.ticket-list-form{
		background-color:#708090;
		width:auto;
		height:60px;
		margin: 0px 220px;
		padding:30px 0px 0px 60px;
	}
	.ticket-list-form ul li{
		display:inline-block;
	}
	.ticket-list-form ul li input{
		width:200px;
		height:35px;
		text-align:center;
		margin-left:30px;
		border: double 2px #708090;
	}
	.ticket-bottom{
		font-size:15px;
		margin:0px 220px;
		border:2px double #696969;
		background-color:#F0E68C;
		padding:10px;
	}
</style>